<template>
<div>
  <div class="login-panel">
  <el-form action="#">
    <el-form-item label="用户名">
      <el-input type="text" v-model="loginModel.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="loginModel.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="loginModel.rememberLogin">记住我</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="button" @click="submit">登录</el-button>
    </el-form-item>
  </el-form>
  </div>
</div>
</template>
<script lang="ts">
import Vue from "vue";

import LoginModel from "./models/login-input";
import axios from "axios";

import url from "./lib/url";

import { Component, Prop } from "vue-property-decorator";

@Component
export default class MainVue extends Vue {
  @Prop({
    default: () => {
      return new LoginModel();
    }
  })
  loginModel!: LoginModel;

  /**
   * 提交请求,进行登录
   */
  submit() {
    var vm = this;
    axios.post(url.loginApi,this.loginModel).then(res => {
      console.log(res);
      if(res.data && res.data.success === true)
      location.href= vm.loginModel.returnUrl; 
    });
  }

}
</script>
<style>
html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  overflow: hidden;
}
body {
  background-image: url("./images/bg-fill.png");
  background-size: 100% 100%;
}
.login-panel {
  width: 450px;
  margin: 40px auto;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}
</style>
